<template>
  <div class="barChart-container" style="width: 100%; height: 270px">
    <div id="barChart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
} from "echarts/components";
import { BarChart, BarSeriesOption } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { getTagAnalysis } from "@/apis/apis";
// 注册必须的组件
echarts.use([
  GridComponent,
  BarChart,
  CanvasRenderer,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
type EChartsOption = echarts.ComposeOption<
  | GridComponentOption
  | BarSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
>;
@Component({
  name: "barChart",
})
export default class barChart extends Vue {
  created() {}
  mounted() {
    this.initChart();
    this.getData();
    
  }
  myChart: any;
  rankTags: string[] = ["标签1", "标签2", "标签3", "标签4", "标签5"];
  data: any = [];
  // 1.绘图准备
  initChart() {
    var chartDom = document.getElementById("barChart");

    this.myChart = echarts.init(chartDom, "macarons");
    // 数据加载动画
    this.myChart.showLoading();
  }
  // 2.获取数据
  getData() {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    // 获取一年的数据
    const startTime = `${year - 1}-${month}-${day}`;
    const endTime = `${year}-${month}-${day}`;

    getTagAnalysis(startTime, endTime)
      .then((res) => {
        if(res.data.code === "200"){
          let resData = res.data.data;
          this.rankTags = Object.keys(resData);
          let viewCounts: number[] = [];
          let likeCounts: number[] = [];
          let collectCounts: number[] = [];
          let followCounts: number[] = [];
          for(let key of this.rankTags){
            viewCounts.push(resData[key][0]);
            likeCounts.push(resData[key][1]);
            collectCounts.push(resData[key][2]);
            followCounts.push(resData[key][3]);
          }
          this.data = [viewCounts, likeCounts, collectCounts, followCounts];
          // 数据获取成功后绘制图表
          this.drawChart();
        }else{
          this.$message.error("获取标签分析数据失败");
          console.log(res.data.code);
        };
      })
      .catch((err) => {
        console.log("this is error from barChart.vue");
        console.log(err);
      });
  }
  // 3.绘制图表
  drawChart() {
    this.myChart.hideLoading();
    var option: EChartsOption;
    option = {
      title: {
        text: "各标签数据访问统计分析",
        left: 50,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        left: "right",
      },
      // 通过grid设置图表在四个方向的留白
      grid: {
        left: "3%",
        right: "2%",
        bottom: "1%",
        top: "10%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        data: this.rankTags,
      },
      series: [
        {
          name: "观看量",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          barWidth: "80%",
          data: this.data[0],
        },
        {
          name: "点赞量",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          barWidth: "80%",
          data: this.data[1],
        },
        {
          name: "评论量",
          type: "bar",
          stack: "total",
          label: {
            show: true,
            position: "insideRight",
          },
          emphasis: {
            focus: "series",
          },
          barWidth: "80%",
          data: this.data[2],
        },
        {
          name: "收藏量",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          barWidth: "80%",
          data: this.data[3],
        },
      ],
    };
    // 绘制图像
    option && this.myChart.setOption(option);
  }
}
</script>

<style lang="scss" scoped>
</style>